<template>
  <div class="bg-white rounded-xl p-6 shadow-md testimonial-card">
    <div class="flex items-start mb-4">
      <img 
        :src="testimonial.avatar" 
        alt="用户头像" 
        class="w-12 h-12 rounded-full object-cover mr-4"
      >
      <div>
        <h4 class="font-medium">{{ testimonial.name }}</h4>
        <div class="flex items-center text-yellow-400">
          <i class="fa fa-star" v-for="i in 5" :key="i" :class="{ 'text-gray-300': i > testimonial.rating }"></i>
        </div>
      </div>
    </div>
    <p class="text-gray-600 mb-3">{{ testimonial.text }}</p>
    <div class="flex items-center text-sm text-gray-500">
      <i class="fa fa-map-marker mr-1"></i>
      <span>{{ city.name }}, {{ city.country }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    testimonial: {
      type: Object,
      required: true
    },
    city: {
      type: Object,
      required: true
    }
  }
};
</script>
